<template>
  <div ref="chartRef" class="my-chart br10 mgb10" />
</template>

<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'
import echarts from './echarts'
const props = defineProps(['options'])
const chartRef = ref<HTMLDivElement>()
let chart: echarts.ECharts | null = null
const resizeHandler = () => {
  chart?.resize()
}
const initChart = () => {
  chart = echarts.init(chartRef.value as HTMLDivElement)
  chart.setOption({
    ...props.options
  })
}
onMounted(() => {
  setTimeout(() => {
    initChart()
  }, 20)
  window.addEventListener('resize', resizeHandler)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeHandler)
  chart?.dispose()
})
</script>

<style lang="scss" scoped>
.my-chart {
  background-color: #fff;
  margin-right: 15px;
  height: 350px;
}
</style>
